<{include file="public/header.html"}>
<style>
	.ht-div-zzz {
		line-height: 45px;
		padding: 0;
		border: 0;
		margin: 10px 0;
	}

	.ht-div-zzz p {
		line-height: 45px;
	}

	.ht-div-zzz input {
		width: 70%;
		line-height: 45px;
		text-indent: 10px;
		margin-left: 100px;
		border: 1px solid #f5f5f5;
		border-radius: 5px;
		background: #f5f5f5;
	}

	.ht_ul {
		width: 100%;
		height: 234px;
		margin: 10px 0;
	}

	.ht_ul li {
		border: 1px solid #e5e5e5;
		margin-right: 10px;
		float: left;
		width: 42%;
		height: 100%;
	}
	.ht-up-li{
		background-size: 100%, 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-image:url(/static/weixin/img/uploadbg.jpg);
	}
	.ht-upload{
		width: 100%;
		height: 100%;
		opacity: 0;
	}
</style>
	<header class="title title-border-sm bj-white">
            <a href="javascript:history.back(-1)" class="icon-return iconfont title-left title-top col-red">&#xe604;</a>
		<h1 class="text-center name"><{$title}></h1>
	</header>
	<form id="sub-form" class="plr15" data-href="<{eval url('task/submit_validate')}>" onsubmit="return false;">
		<div class="security">
			<div class="task-detail-head" style="background: none;padding: 10px 0">
				<div class="pannel">
					<h3>资料审核</h3>
					<div class="text">
						<{if in_array(1,$task['validate'])}>
						<div class="input-group input-group-tip ht-div-zzz">
							<p style="color:#333;">姓名</p>
							<input type="text" name="name" data-validate="name" value="<{$validate['name']}>" placeholder="请填写您的真实姓名"/>
						</div>
						<{/if}>
						<{if in_array(2,$task['validate'])}>
						<div class="input-group input-group-tip ht-div-zzz">
							<p style="color:#333;">身份证</p>
							<input type="text" name="identity" data-validate="identity" value="<{$validate['identity']}>" placeholder="请填写您的身份证号码" onkeyup="this.value=this.value.replace(/\D/g,'')"/>
						</div>
						<{/if}>
						<{if in_array(3,$task['validate'])}>
						<div class="input-group input-group-tip ht-div-zzz">
							<p style="color:#333;">手机号码</p>
							<input type="text" name="phone" data-validate="phone" value="<{$validate['phone']}>" placeholder="请填写您的手机号码" onkeyup="this.value=this.value.replace(/\D/g,'')"/>
						</div>
						<{/if}>
					</div>
				</div>

				<{if $task['img_list']}>
				<div class="pannel">
					<h3>截图示例</h3>
					<div class="text">
						<ul class="ht_ul" id="preview">
							<{if $task['img_list']}>
							<{foreach from=$task['img_list'] item=vimgval}>
							<li><img src="<{$vimgval}>" width="200"></li>
							<{/foreach}>
							<div class="clear"></div>
							<{/if}>
						</ul>
						<ul class="ht_ul">
							<{if $validate['img_list']}>
							<{foreach from=$validate['img_list'] item=vimgval}>
							<li><img src="<{$vimgval}>" width="200"><input type="hidden" name="img_list[]" value="<{$vimgval}>"/> </li>
							<{/foreach}>

							<{/if}>
							<li class="ht-up-li">
								<input class="ht-upload" type="file" accept="image/*;capture=camera" id="uploadFile" />
							</li>
							<div class="clear"></div>
						</ul>
					</div>
				</div>
				<{/if}>
			</div>

			<input type="hidden" value="<{$task['tid']}>" name="tid"/>
			<input type="submit" id="form-modify-btn" class="btn btn-yes mt10" value="提交">
		</div>
	</form>


<script type="text/javascript" src="/static/js/jquery.html5uploader.js"></script>
<script type="text/javascript" src="/static/js/account-min-1.0.js"></script>
<script type="text/javascript">
$(function(){
    $.mvalidateExtend({
        name:{
            required : true,
            descriptions:{
                required : '<div class="field-invalidmsg">请填写您的真实姓名</div>',
            }
        },
        identity:{
            required : true,
            descriptions:{
                required : '<div class="field-invalidmsg">请填写您的身份证号码</div>',
            }
        },
        phone:{
            required : true,
            descriptions:{
                required : '<div class="field-invalidmsg">请填写您的手机号码</div>',
            }
        }
    });

    $("#sub-form").mvalidate({
        type:1,
        onKeyup:true,
        sendForm:true,
        firstInvalidFocus:false,
        descriptions: {},
        valid:function(event,options){
            var url = $("#sub-form").attr("data-href");
            $("#form-modify-btn").val("提交中...");
            $.ajax({
                type: "POST",
                url: url,
                async:true,
                data: $("#sub-form").serialize(),
                success: function(resp) {
                    console.log(resp);
                    resp = $.parseJSON(resp);
                    if(resp.reqStatus){
                        $.mvalidateTip("提交成功");
                        setTimeout(function () {
                            location.href = resp.link;
                        }, 2000);
                    }else{
                        $("#form-modify-btn").val("重新提交");
                        $.mvalidateTip(resp.msg);
                        return false;
                    }
                }
            });
        },
        invalid:function(event, status, options){
            //点击提交按钮时,表单未通过验证触发函数
        },
        eachField:function(event,status,options){
            //点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象
        },
        eachValidField:function(val){},
        eachInvalidField:function(event, status, options){},
    })
});
$(function(){
    setTimeout(function(){init();},1000);
});
function init() {
    var u = new UploadPic();
    u.init({
        input: document.querySelector('#uploadFile'),
        callback: function (base64) {
            $.ajax({
                url:"http://static.tan.com/upload/base64_img.html",//上传接口
                data:{str:base64,type:this.fileType,width:90,height:90},
                type:'post',
                dataType:'json',
                success:function(res){
                    res = eval(res);
                    if(res.result == 1){
                        $(".ht-up-li").before("<li><img src='"+res.img_url+"' width='200'><input type='hidden' name='img_list[]' value='"+res.img_url+"'/></li>");
                        $.mvalidateTip("上传成功");
                    }else{
                        $.mvalidateTip(res.info);
                    }
                }
            })
        },
        loading: function () {

        }
    });
}
</script>
<{include file="public/footer.html"}> 